<template>
  <div>
    <detailHeaders :sightName= "sightName" :bannerImg= "bannerImg" @changeIsShow="changeShow"></detailHeaders>
    <detail-gallery :imgs= "imgs" @changeIsShow="changeShow" v-show="isShow"></detail-gallery>
    <detail-header-top></detail-header-top>
    <detail-list  :list= "categoryList"></detail-list>
  </div>
</template>
<script>
import detailHeaders from "./components/Header.vue";
import detailGallery from "common/Gallery/Gallery.vue";
import detailHeaderTop from "./components/HeaderTop.vue";
import detailList from "./components/List.vue";
export default {
  name: "detail",
  data() {
    return {
      isShow: false,
      imgs: [],
      categoryList:[], 
      bannerImg:'',
      sightName:''
    };
  },
  methods: {
    changeShow(show) {
      this.isShow = show;
    },
    getDetailInfo(){
      this.$axios.get('/api/detail.json',{id : this.$route.params.id})
        .then((data) => {
          data = data .data
          if(data.ret && data.data){
            data = data.data
            console.log(data)
            this.bannerImg = data.bannerImg
            this.categoryList = data.categoryList
            this.imgs = data.gallaryImgs
            this.sightName = data.sightName
          }
        }).catch((err) =>{console.log(err)})
    }
  },
  mounted(){
    this.getDetailInfo()
  },
  components: {
    detailHeaders,
    detailGallery,
    detailHeaderTop,
    detailList
  }
};
</script>
<style lang="less" scoped>
</style>
